<template>
  <div class="comment">
    <!-- 评论列表 -->
    <!-- 阻止页面首次默认加载  :immediate-check="false" -->
    <van-list
      v-model="loading"
      :immediate-check="false"
      @load="onLoad"
      :finished="finished"
      finished-text="没有更多了"
    >
      <div
        class="item van-hairline--bottom van-hairline--top"
        v-for="(item, index) in comments"
        :key="index"
      >
        <van-image
          round
          width="1rem"
          height="1rem"
          fit="fill"
          :src="item.aut_photo"
        />
        <div class="info">
          <p>
            <span class="name">{{ item.aut_name }}</span>
            <span style="float: right">
              <span class="van-icon van-icon-good-job-o zan"> </span>
              <span class="count">{{ item.like_count }}</span>
            </span>
          </p>
          <p>{{ item.content }}</p>
          <p>
            <span class="time">{{ item.pubdate | relTime }}</span
            >&nbsp;
             <!-- 阻止打开评论页面首次默认加载  :immediate-check="false" -->
            <van-tag plain @click="openShowReply(item.com_id.toString())" :immediate-check="false">{{item.reply_count}} 回复</van-tag>
          </p>
        </div>
      </div>
    </van-list>
    <!-- 底部输入框 -->
    <div class="reply-container van-hairline--top">
      <van-field v-model="value" :placeholder="showReply? '回复评论...': '写评论...'">
        <van-loading v-if="submiting" slot="button" type="spinner" size="16px">
        </van-loading>
        <span class="submit" v-else slot="button" @click="submit">提交</span>
      </van-field>
    </div>
    <!-- 回复列表 -->
    <van-action-sheet v-model="showReply" class="reply_dailog" title="回复评论">
      <van-list
        v-model="reply.loading"
        :finished="reply.finished"
        finished-text="没有更多了"
      >
        <div
          class="item van-hairline--bottom van-hairline--top"
          v-for="(comm, i) in reply.list"
          :key="i"
        >
          <van-image
            round
            width="1rem"
            height="1rem"
            fit="fill"
            :src="comm.aut_photo"
          />
          <div class="info">
            <p><span class="name">{{comm.aut_name}}</span></p>
            <p>{{comm.content}}</p>
            <p><span class="time">{{comm.pubdate| relTime }}</span></p>
          </div>
        </div>
      </van-list>
    </van-action-sheet>
  </div>
</template>

<script>
import { getComments, articleOrComment } from '../../../api/article'
export default {
  data () {
    return {
      // 评论列表加载中状态
      loading: false,
      // 评论列表完全加载完毕状态
      finished: false,
      // 输入的内容
      value: '',
      // 提交 评论或者回复 中
      submiting: false,
      comments: [], // 评论列表数据
      // 是否显示回复对话框
      showReply: false,
      // 回复相关数据
      reply: {
        loading: false, // 回复评论列表加载中状态
        finished: false, // 回复评论列表是否加载完成
        list: [] // 回复评论列表数据
      }
    }
  },
  methods: {
    // 页面刷新自动加载方法
    // 加载评论列表
    async onLoad () {
      // 调用接口方法，获取评论列表
      const { status, data } = await getComments({
        type: 'a',
        source: this.$route.params.id,
        offset: this.offset // 数据下一页请求开始的位置 => 表示从此id向后取
      })
      // 判断接口是否发送成功
      if (status === 200) {
        // console.log(data)
        // 向原有的数据中追加
        this.comments.push(...data.results)
        // 重置(结束)加载状态
        this.loading = false
        // 判断是否还要数据
        if (data.last_id > data.end_id) {
          // 如果还有数据，就把当前请求的第一个id赋值下次页面刷新第一页的id
          this.offset = data.last_id
        } else {
          // 如果没有数据显示加载完成
          this.finished = true
        }
      }
    },
    // 点击回复按钮打开回复评论对话框
    openShowReply (commID) {
      // 打开评论列表对话框
      this.showReply = true
      this.commentID = commID // 当前打开评论回复的评论id
      this.reply.list = [] // 清空回复评论的列表
      this.reply.loading = true // 开启加载中状态
      this.reply.finished = false // 重置没有更多数据
      this.reply.offset = null // 重置偏移量
      this.getCommentList() // 调用方法，获取评论列表
    },
    // 发送异步函数接口，获取评论回复列表
    async getCommentList () {
      // 向后端接口发送数据
      const { status, data } = await getComments({
        type: 'c',
        source: this.commentID, // 当前打开评论回复的评论id
        offset: this.reply.offset
      })
      // 判断接口状态是否为200
      if (status === 200) {
        // console.log(data)
        // 将当前获取到的数据push到评论回复列表中
        this.reply.list.push(...data.results)
        // 关闭加载状态
        this.reply.loading = false
        // 判断是否还有数据
        if (data.last_id > data.end_id) {
          // 如果当前有数据，就把当前请求获取到的第一个id作为下一页的起始id
          this.reply.offset = data.last_id
        } else {
          // 如果没有数据那么确认加载状态完毕
          this.reply.finished = true
        }
      }
    },
    // 对文章评论或对文章的某一条评论回复
    async submit () {
      // 判断当前输入框是否有内容
      if (!this.value) return false
      try {
        // 开启提交效果
        this.submiting = true
        // 判断当前是否是写评论还是对某一条评论回复
        if (this.showReply) {
          // 回复某一条评论
          // 调用接口对文章某一条评论发起评论回复
          const { status, data } = await articleOrComment(this.commentID, this.value, this.$route.params.id)
          if (status === 201) {
            // console.log(data)
            // 向回复评论列表顶部追加数据
            this.reply.list.unshift(data.new_obj)
            // 提示
            this.$toast.success('回复成功')
            // 修改评论列表的评论数据
            const comment = this.comments.find((item) => item.com_id.toString() === this.commentID)
            // 每次数据加一
            comment.reply_count++
          }
        } else {
          // 对文章进行评论
          // 调用接口数据
          const { status, data } = await articleOrComment(this.$route.params.id, this.value)
          if (status === 201) {
            // console.log(data)
            // 向评论列表追加数据
            this.comments.unshift(data.new_obj)
            // 提示
            this.$toast.success('评论成功')
          }
          // 清空输入框数据
          this.value = ''
          // 关闭提交效果
          this.submiting = false
        }
      } catch (error) {
        // 清空输入框数据
        this.value = ''
        // 关闭提交效果
        this.submiting = false
        // 提示
        this.$toast.fail('操作失败')
      }
    }
  },
  // 组件激活的时候自动加载钩子函数
  activated () {
    /**
     * 在组建激活的时候，把列表数据清空，并且设置列表的加载中的状态设置为true
     */
    this.comments = [] // 将评论列表值为空
    this.loading = true // 将加载中的状态改为true
    this.finished = false // 重置是否全部加载完毕状态
    this.offset = null // 重置偏移量
    this.onLoad() // 最后在重新调用一下加载页面的方法
  },
  created () {
    // 初始化分页数据，保证下一页的开始的文章id是当前页最后一个的文章id
    this.offset = null
  }
}
</script>

<style lang="less" scoped>
.comment {
  margin-top: 10px;
  /deep/ .item {
    display: flex;
    padding: 10px 0;
    width: 100%;
    overflow: hidden;
    .info {
      flex: 1;
      padding-left: 10px;
      .name {
        color: #069;
      }
      .zan {
        vertical-align: middle;
        padding-right: 2px;
      }
      .count {
        vertical-align: middle;
        font-size: 10px;
        color: #666;
      }
      .time {
        color: #666;
      }
      p {
        padding: 5px 0;
        margin: 0;
      }
    }
  }
  /deep/ .van-button:active::before {
    background: transparent;
  }
}
.reply-container {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 44px;
  width: 100%;
  background: #f5f5f5;
  z-index: 9999;
  .submit {
    font-size: 12px;
    color: #d43d3d;
  }
}
// 回复样式
.van-popup--bottom{
  &.van-popup--round{
    border-radius: 0;
  }
}
.reply_dailog {
  height: 100%;
  max-height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  .van-action-sheet__header {
    background: #d43d3d;
    color: #fff;
    .van-icon-close {
      color: #fff;
    }
  }
  .van-action-sheet__content{
    flex: 1;
    overflow-y: auto;
    padding: 0 10px 44px;
  }
}
</style>
